<template>
<div class="login-body">

     <vue-particles
      class="login-bg"
      color="#39AFFD"
      :particleOpacity="0.7"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="4"
      linesColor="#8DD1FE"
      :linesWidth="1"
      :lineLinked="true"
      :lineOpacity="0.4"
      :linesDistance="150"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="grab"
      :clickEffect="true"
      clickMode="push"
    >

   </vue-particles>
    <div class="login-container">
        <el-form :model="ruleForm2" :rules="rules2"
         status-icon
         ref="ruleForm2" 
         label-position="left" 
         label-width="0px" 
         class="demo-ruleForm login-page">
            <h3 class="title">后台管理系统</h3>
            <el-form-item prop="username">
                <el-input type="text" 
                    v-model="ruleForm2.accountName"
                    auto-complete="off" 
                    placeholder="用户名"
                ></el-input>
            </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" 
                        v-model="ruleForm2.password"
                        auto-complete="off" 
                        placeholder="密码"
                    ></el-input>
                </el-form-item>
                 <el-form-item prop="loginType">
                    <el-input type="text"
                              v-show="false"
                        v-model="ruleForm2.loginType" 
                        auto-complete="off" 
                        placeholder="认证类型"
                    ></el-input>
                </el-form-item>
            <el-checkbox 
                v-model="checked"
                class="rememberme"
            >记住密码</el-checkbox>
            <el-form-item style="width:100%;">
                <el-button type="primary" style="width:100%;" @click="login" :loading="logining">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
 
</div>

</template>

<script>
import axios from 'axios'
import user_model from "@/api/user_model"
import store from '@/store'
import {activeRouter} from '@/util/permission'
export default {
    data(){
        return {
            logining: false,
            ruleForm2: {
                accountName: 'admin',
                password: '111111',
                loginType: 'password'
            },
            rules2: {
                mdosName: [{required: true, message: '请输入你的账户', trigger: 'blur'}],
                mdosPassword: [{required: true, message: '请输入你的密码', trigger: 'blur'}]
            },
            checked: false
        }
    },
    mounted(){

    },
    methods: {
        
        login(){
            user_model.SsoLogin(this.ruleForm2).then((res) =>{
         if(res.code === 0){
                  store.commit('SET_TOKEN',"Bearer "+res.data.token);
                  sessionStorage.setItem("user", JSON.stringify(res.data.user))  // 缓存用户信息
                  //更新路由
                  activeRouter()
                    this.$router.push("/")
                }
            })
        },

   
        // login(){
        //     user_model.Login(this.ruleForm2).then((res)=>{
        //         let token = res.data.user.token
        //         if(res.code === 0){
        //           store.commit('SET_TOKEN',token);
        //           sessionStorage.setItem("user", JSON.stringify(res.data))  // 缓存用户信息
        //           //更新路由
        //           activeRouter()
        //             this.$router.push("/")
        //         }
                
        //     })
        // }


    }
};
</script>
<style scoped>
.login-body{
  width:99.9%;
  height: 99.9vh;
  background-image: url("../assets/img/123.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  position: relative;     
  
}
.login-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.login-container {
    width: 100%;
    height: 100%;
    /* background:#112346; */
 background-image: url("../assets/img/123.png");
}
.login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    /* margin: 180px auto; */
    float:right;
    margin-top:200px;
    margin-right:10%;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
}
label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
}
</style>
